import { AreaChartOutlined, HeatMapOutlined } from "@ant-design/icons";
import { cloneDeep } from "lodash-es";
import Dashboard from "../views/dashboard";
import CategoryList from "../views/category/list";
import CategoryPub from "../views/category/pub";
import TestList from "../views/test-router/list";
import Detail from "../views/test-router/detail";
import NotFound from "../views/not-found";
import Category from "../views/course/category";
import ArticleList from "../views/course/article-list";
import ArticlePub from "../views/course/article-pub";
import Login from "../views/login";
import Role from "../views/system/role";
import User from "../views/system/user";
import SagaDemo from "../views/saga-demo";
import UpLoadFile from "../views/large-file";
//自定义的数据包，来表达侧边菜单，复用渲染Route组件
export const mainRoutes = [
  {
    key: "/dashboard",
    label: "数据可视化",
    icon: <AreaChartOutlined />,
    component: Dashboard,
    exact: true,
  },
  {
    key: "/category",
    label: "分类管理",
    icon: <HeatMapOutlined />,
    children: [
      {
        key: "/category/list",
        label: "分类列表",
        component: CategoryList,
        hidden: true,
      },
      {
        key: "/category/pub",
        label: "分类发布",
        component: CategoryPub,
      },
    ],
  },
  {
    key: "/course",
    label: "课程管理",
    icon: <HeatMapOutlined />,
    children: [
      {
        key: "/course/category",
        label: "分类管理",
        component: Category,
      },
      {
        key: "/course/article/list",
        label: "图文课程",
        component: ArticleList,
      },
      {
        key: "/course/article/pub",
        label: "课程发布",
        component: ArticlePub,
      },
    ],
  },
  {
    key: "/system",
    label: "系统管理",
    icon: <HeatMapOutlined />,
    children: [
      {
        key: "/system/role",
        label: "角色管理",
        component: Role,
      },
      {
        key: "/system/user",
        label: "账号管理",
        component: User,
      },
    ],
  },
  {
    key: "/saga",
    label: "演示ReduxSaga",
    icon: <AreaChartOutlined />,
    component: SagaDemo,
    exact: true,
  },
  {
    key: "/large/file",
    label: "大文件上传",
    icon: <AreaChartOutlined />,
    component: UpLoadFile,
  },
  // {
  //   key: "*",
  //   label: "404",
  //   icon: <AreaChartOutlined />,
  //   component: NotFound,
  //   hidden: true,
  // },
];

// /course/list

// /course
// ['/course/list','/category/list']

// 控制侧边菜单隐藏(hidden、permission)
export const menuFn = (permission) => {
  // let menu = [...mainRoutes]; //浅拷贝
  // let menu = JSON.parse(JSON.stringify(mainRoutes)); //深拷贝，影响内部组件类型
  let menu = cloneDeep(mainRoutes); //深拷贝
  function loop(arr) {
    for (let i = arr.length - 1; i >= 0; i--) {
      delete arr[i].exact;
      let bool = !permission.includes(arr[i].key); //路径是否存在于permission中
      if (bool) {
        //在删除前，尝试查看permission中有没有类似的路径
        let findChild = permission.filter(
          (item) => item.indexOf(arr[i].key) != -1
        );
        if (!findChild.length) {
          arr.splice(i, 1);
          continue;
        }
      }
      if (arr[i].hidden) {
        arr.splice(i, 1);
        continue;
      }
      if (arr[i].children) {
        loop(arr[i].children);
      }
    }
  }
  loop(menu);
  console.log("处理后的菜单数据", menu);
  return menu;
};

// 将菜单数据处理为渲染Route组件的数据

// "/category"
// "/category/list"
// "/category/pub"
// "/course/article/list"
// "/course/article/pub"
export const routesFn = (permission) => {
  let routes = [];
  function loop(arr) {
    arr.forEach((item) => {
      if (item.children) {
        loop(item.children);
      } else {
        //根据用户权限，过滤路由数据包
        if (permission.includes(item.key)) {
          routes.push(item);
        }
      }
    });
  }
  loop(mainRoutes);
  return routes;
};
